<template>
  <div>
    <el-popover
      ref="pop"
      placement="right"
      width="300"
      trigger="click"
    >
      <div class="popover_yFjqQm">
        <div class="tip">
          注：图标ID进入图标库查看
        </div>
        <el-input
          v-model="filteStr"
          clearable
          style="margin-bottom: 5px"
          placeholder="输入图标ID过滤"
        >
        </el-input>
        <i
          v-for="(icon, key) in icons"
          v-show="icon.indexOf(filteStr) > -1"
          :key="key"
          :ref="checkIfNullIocn(icon)"
          :class="'menuIconfont ' + icon"
          @click="selectIcon(icon)"
        ></i>
      </div>
      <el-input
        slot="reference"
        v-model="currentValue"
        placeholder="请输入内容"
        style="max-width: 240px;"
        :disabled="disabled"
        @input="selectIcon"
      >
        <template slot="prepend">
          <i :class="'menuIconfont ' + currentValue"></i>
        </template>
        <el-button
          slot="append"
          icon="iconfont iconcaidan"
        ></el-button>
      </el-input>
    </el-popover>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'

@Component({
  name: 'MenuIconSelecter',
  components: {
  }
})
export default class extends Vue {
  @Model('change') icon!: string
  @Prop() disabled!: boolean

  currentValue = ''
  icons: any = []
  filteStr = ''

  @Watch('icon')
  iconChange(v: any) {
    this.currentValue = v
  }

  initIconData() {
    const icons = []
    for (let i = 1; i < 150; i++) {
      icons.push('menu-icon' + i)
    }
    this.icons = icons
  }

  checkIfNullIocn(ref: any) {
    setTimeout(() => {
      const el = (this.$refs as any)[ref][0]
      const elBefore = window.getComputedStyle(el, ':before')
      if (elBefore.content === 'none' || !elBefore.content) {
        el.style.display = 'none'
      }
    })
    return ref
  }

  selectIcon(v: string) {
    this.currentValue = v
    this.$emit('change', v)
  }

  created() {
    this.initIconData()
  }
}
</script>

<style lang="scss">
  .popover_yFjqQm{
    word-wrap: break-word;
    .tip {
      font-size: 12px;
      color: #f56c6c;
      margin-bottom: 20px;
    }
    i {
      cursor: pointer;
      margin: 8px 16.8px;
      display: inline-block;
    }
    i:hover{
      transform: scale(2);
    }
  }
</style>
